<template>
  <div>
    <title-bar :title="'供应商中心'"/>
    <van-tabs :active="parActiveIndex" @click="handleParTabClick" class="van-tabs__wrap">
      <van-tab title="销售统计">
        <van-tabs sticky :active="activeIndex" @click="handleTabClick">
          <van-tab v-for="(tabItem, i) in tabItems" :key="i" :title="tabItem.title">
            <div class="header_text">
              <span class="price_text">
                <span>{{priceTotal.toFixed(2)}}</span>
              </span>
              <span class="num_text">
                <span>{{saleNumTotal}}</span>
              </span>
            </div>
            <van-cell-group style="padding: 10px;">
              <div class="btn_group">
                <div v-if="tabItem.status === 4">
                  <van-button
                    round
                    plain
                    type="danger"
                    size="small"
                    :style="btnStyle"
                    @click="showPickDate=true"
                  >{{dateRange}}</van-button>
                </div>
              </div>
            </van-cell-group>
            <van-list
              v-model="loading"
              class="scroll-load"
              :finished="finished"
              :immediate-check="false"
              :offset="100"
              @load="loadMore"
            >
              <div v-if="statisticType === 0">
                <van-cell-group v-for="(item, i) in items" :key="i" style="margin-bottom: 10px;">
                  <van-cell>
                    <div slot="title">
                      <b>{{item.shortTitle + ' ' + (item.optionname || '')}}</b>
                    </div>
                    <div slot="right-icon" class="prices_text">
                      总计：{{item.costprice+"*"}}
                      <b class="total_text">{{item.total}}</b> 份
                    </div>
                  </van-cell>
                  <van-cell v-for="(warehouse, i) in item.storeRoom" :key="i">
                    <div slot="title" class="detail_title">
                      {{'订货团长数量：' + warehouse.teamNum}}
                      <div>仓库：{{warehouse.storeroom}}</div>
                    </div>
                    <div class="price_text" style="color: gray;">
                      已售：
                      <span class="red">{{item.costprice.toFixed(2) + ' × ' + warehouse.total}}</span>
                    </div>
                  </van-cell>
                </van-cell-group>
              </div>
            </van-list>

            <is-empty v-if="isEmpty">没有找到符合条件的记录</is-empty>
          </van-tab>
        </van-tabs>
        <pick-date :show="showPickDate" @picked="onDatePicked" @cancel="onDateCancel"/>
      </van-tab>
      <van-tab title="退货统计">
        <van-tabs sticky :active="activeIndex" @click="handleTabClick">
          <van-tab v-for="(tabItem, i) in tabItemsTui" :key="i" :title="tabItem.title">
            <div class="header_text">
              <span class="num_text">
                <span>{{returnNumTotal}}</span>
              </span>
            </div>
            <van-cell-group style="padding: 10px;">
              <div class="btn_group">
                <div v-if="tabItem.status === 4">
                  <van-button
                    round
                    plain
                    type="danger"
                    size="small"
                    :style="btnStyle"
                    @click="showPickDate=true"
                  >{{dateRange}}</van-button>
                </div>
              </div>
            </van-cell-group>
            <van-list
              v-model="loading"
              class="scroll-load"
              :finished="finished"
              :immediate-check="false"
              :offset="100"
              @load="loadMore"
            >
              <div v-if="statisticType === 0">
                <van-cell-group
                  v-for="(item, i) in returnItems"
                  :key="i"
                  style="margin-bottom: 10px;"
                >
                  <van-cell>
                    <div slot="title">
                      <b>{{item.productName}}</b>
                    </div>
                    <div style="color: gray;">
                      退货数量：
                      <span class="red">{{item.nums}}</span>
                    </div>
                  </van-cell>
                  <van-cell>
                    <div slot="title" class="detail_title">
                      商品规格：{{item.optionname || ''}}
                      <div>商品货号：{{item.cenTimeOrder || ''}}</div>
                      <div>退货来源服务中心：{{item.centreName}}</div>
                      <div>是否退货到仓库：{{item.warehouse}}</div>
                    </div>
                  </van-cell>
                </van-cell-group>
              </div>
            </van-list>
            <is-empty v-if="isEmpty">没有找到符合条件的记录</is-empty>
          </van-tab>
        </van-tabs>
        <pick-date :show="showPickDate" @picked="onDatePicked" @cancel="onDateCancel"/>
      </van-tab>
    </van-tabs>
    <pick-date :show="showPickDate" @picked="onDatePicked" @cancel="onDateCancel"/>
  </div>
</template>
<script>
import { Tabs, Tab } from "vant";
import IsEmpty from "@/vue/components/is-empty/";
import loadMore from "@/vue/mixin/list-load-more";
import { SUPPLIER_STATISTIC, RETURN_STATISTICS } from "@/api/user";
import moment from "moment";
import PickDate from "@/vue/components/pick-date-range/";
import TitleBar from "@/vue/components/title-bar/";

export default {
  mixins: [loadMore],

  data() {
    const today = new Date();

    return {
      tabItems: [
        {
          //销售统计
          title: "今日销量",
          status: 0
        },
        {
          title: "昨日销量",
          status: 3
        },
        {
          title: "按时间",
          status: 4
        }
      ],
      tabItemsTui: [
        {
          //退货统计
          title: "今日退货",
          status: 0
        },
        {
          title: "昨日退货",
          status: 3
        },
        {
          title: "按时间",
          status: 4
        }
      ],
      shopId: this.getUser().id,
      activeIndex: 0,
      parActiveIndex: 0, //销售统计和退货统计切换
      statisticType: 0, //今日销售和昨日退货切换
      priceTotal: 0, //销售总金额
      saleNumTotal: 0, //销售总数量
      returnNumTotal: 0, //退货总数量
      btnStyle: {
        "background-color": "white"
      },
      startDate: today,
      endDate: today,
      _showPickDate: false,
      get showPickDate() {
        return this._showPickDate;
      },
      set showPickDate(value) {
        this._showPickDate = value;
      }
    };
  },
  computed: {
    dateRange() {
      return (
        moment(this.startDate).format("YYYY.MM.DD") +
        " - " +
        moment(this.endDate).format("YYYY.MM.DD")
      );
    }
  },
  created() {
    this.resetInit();
  },
  methods: {
    initData() {
      if (this.parActiveIndex === 0) {
        // 销售统计
        const timeType = this.tabItems[this.activeIndex].status;
        return this.$reqGet(
          SUPPLIER_STATISTIC,
          {
            supplyId: this.user.supplier.id,
            centreId: this.user.centreId,
            timeType: timeType,
            type: 0,
            start: moment(this.startDate).format("YYYY-MM-DD"),
            end: moment(this.endDate).format("YYYY-MM-DD"),
            offset: (this.pages.currPage - 1) * this.pages.perPage,
            limit: this.pages.perPage
          },
          {
            hideLoading: true
          }
        ).then(res => {
          const { countList, salesTotal } = res.data.data;
          this.items.push(...countList.rows);
          this.priceTotal = salesTotal[0]
            ? salesTotal[0].totalCostprice || 0
            : 0;
          this.saleNumTotal = salesTotal[0] ? salesTotal[0].total || 0 : 0;
          return {
            pageCount: countList.rows.length,
            totalCount: countList.total
          };
        });
      } else {
        // 退货统计
        const timeType = this.tabItems[this.activeIndex].status;
        return this.$reqGet(
          RETURN_STATISTICS,
          {
            timeType: timeType,
            supplyId: this.user.supplier.id,
            start: moment(this.startDate).format("YYYY-MM-DD"),
            end: moment(this.endDate).format("YYYY-MM-DD"),
            offset: (this.pages.currPage - 1) * this.pages.perPage,
            limit: this.pages.perPage
          },
          {
            hideLoading: true
          }
        ).then(res => {
          const { countList, salesTotal } = res.data.data;

          this.returnItems.push(...countList.rows);
          this.returnNumTotal = salesTotal ? salesTotal || 0 : 0;
          return {
            pageCount: countList.rows.length,
            totalCount: countList.total
          };
        });
      }
    },
    handleTabClick(index) {
      this.activeIndex = index;
      this.resetInit();
    },
    handleParTabClick(index) {
      this.parActiveIndex = index;
      //销售统计或退货统计初始化
      this.resetInit();
    },
    onTypeClick(type) {
      this.statisticType = type;
      this.resetInit();
    },
    onDatePicked(start, end) {
      this.startDate = start;
      this.endDate = end;
      this.showPickDate = false;
      this.resetInit();
    },
    onDateCancel() {
      this.showPickDate = false;
    }
  },
  components: {
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [IsEmpty.name]: IsEmpty,
    [PickDate.name]: PickDate,
    [TitleBar.name]: TitleBar
  }
};
</script>
<style lang="scss" scoped>
.header_text {
  font-size: 30px;
  color: white;
  margin-top: 1px;
  text-align: center;
  background-color: $green;
}

.price_text {
  ::before {
    content: "¥";
    font-size: 10px;
    margin-right: 3px;
  }
}
.prices_text {
  ::before {
    font-size: 10px;
    margin-right: 3px;
  }
}
.num_text {
  margin-left: 30px;
  ::after {
    content: "份";
    font-size: 10px;
  }
}

.detail_title {
  color: gray;
  margin-left: 5px;
}

.total_text {
  color: $red;
  font-size: 18px;
}

.btn_group {
  display: table;
  width: 100%;
  button {
    width: 98%;
  }
  div {
    display: table-cell;
    text-align: center;
    i {
      font-size: 6px;
    }
  }
}
.van-tabs__wrap {
  margin-top: 45px;
}
</style>
